<template>
  <div class="player">
    <div id="player">
    </div>
  </div>
</template>

<script>
export default {
  name: "Playervideo",
  data() {
    return {}
  },
  // created 初始化，放置的是ajax等操作/获取数据的代码，不涉及操作页面
  // mounted 初始化，放置的是关于操作页面的初始化js代码
  mounted() {
    // let jwt_token = this.check_login();
    let user_name = localStorage.username || sessionStorage.username;
    let token = localStorage.token || sessionStorage.token;
    // 1. 到数据库中查询用户购买的课程，是否有当前章节
    // 2. 到数据库中查询当前用户购买的课程是否在有效期内
    // 3. 播放页面显示课程章节和课时的播放列表
    // 4. 通过vid播放不同的课时视频
    // 以上4个功能自行完成
    // let vid = "869c62ab0c197eb262169916eef359f3_8"; // this.$route.params.vid;
    let vid = this.$route.params.vid; // this.$route.params.vid;
    let self = this;
    var player = polyvPlayer({
      wrap: '#player',
      width: document.documentElement.clientWidth - 260, // 页面宽度
      height: document.documentElement.clientHeight, // 页面高度
      forceH5: true, // 支持H5标准
      vid: vid,
      code: user_name, // 一般是用户昵称
      // 视频加密播放的配置
      playsafe: function (vid, next) { // 向后端发送请求获取加密的token
        self.$axios.get(`${self.$settings.host}/order/video/`, {
          params: {
            vid: vid,
          },
          headers: {
            "Authorization": "jwt " + token,
          }
        }).then(function (response) {
          // 获取播放视频的token令牌
          next(response.data.token_data);  // 向polyv请求视频数据了
        })
      }
    });
  },
}
</script>

<style scoped>

</style>
